<template>
  <div class="p-2">
    <el-row :gutter="20">
      <el-col :lg="24" :xs="24">
        <div v-show="showSearch" class="mb-[10px]">
          <el-card shadow="hover">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
              <el-form-item label="设备名称" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>

        <el-card shadow="hover">
          <template #header>
            <el-row :gutter="10">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
              </el-col>
              <right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar>
            </el-row>
          </template>

          <el-table v-loading="loading" border :data="listData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <template v-for="(item, index) in columns">
              <el-table-column v-if="item.visible"
                               :key="item.key"
                               :label="item.label"
                               :width="item.width"
                               align="center"
                               :prop="item.key" >
                <template v-slot="scope">
                  <template v-if="item.label === '处置状态'">
                    <el-tag type="success" v-if="scope.row.处置状态 === '在用'">{{ scope.row.处置状态 }}</el-tag>
                    <el-tag type="warning" v-if="scope.row.处置状态 === '维修中'">{{ scope.row.处置状态 }}</el-tag>
                  </template>
                </template>
              </el-table-column>
            </template>

            <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button link type="primary" @click="handleEdit(scope.row)" icon="Edit">修改</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>

    <formVue ref="formRef"></formVue>

  </div>
</template>

<script setup>
// 方法
import { ref } from 'vue'
// 组件
import formVue from '@/views/property/device/form.vue'
const formRef = ref(null)
// 列显隐信息
const columns = ref([
  { "key": "设备名称", "label": "设备名称", "visible": true, "width": 140, "children": [] },
  { "key": "编号", "label": "编号", "visible": true, "width": 120, "children": [] },
  { "key": "设备存放区域", "label": "设备存放区域", "visible": true, "width": 140, "children": [] },
  { "key": "类型", "label": "类型", "visible": true, "width": 150, "children": [] },
  { "key": "处置状态", "label": "处置状态", "visible": true, "width": 120, "children": [] },
  { "key": "型号", "label": "型号", "visible": true, "width": 120, "children": [] },
  { "key": "站点", "label": "站点", "visible": true, "width": 120, "children": [] },
  { "key": "定检状态", "label": "定检状态", "visible": true, "width": 120, "children": [] },
  { "key": "下次定检天数", "label": "下次定检天数", "visible": true, "width": 120, "children": [] },
  { "key": "下次定检日期", "label": "下次定检日期", "visible": true, "width": 120, "children": [] },
  { "key": "定检提醒天数", "label": "定检提醒天数", "visible": true, "width": 120, "children": [] },
  { "key": "定检记录", "label": "定检记录", "visible": true, "width": 150, "children": [] },
  { "key": "关联委托", "label": "关联委托", "visible": true, "width": 150, "children": [] },
  { "key": "校准日期", "label": "校准日期", "visible": true, "width": 120, "children": [] },
  { "key": "测试范围", "label": "测试范围", "visible": true, "width": 120, "children": [] },
  { "key": "设备精度", "label": "设备精度", "visible": true, "width": 120, "children": [] },
  { "key": "供应商", "label": "供应商", "visible": true, "width": 150, "children": [] },
  { "key": "生产厂商", "label": "生产厂商", "visible": true, "width": 120, "children": [] },
  { "key": "价格", "label": "价格", "visible": true, "width": 120, "children": [] },
  { "key": "设备购买日期", "label": "设备购买日期", "visible": true, "width": 120, "children": [] },
  { "key": "投入使用日期", "label": "投入使用日期", "visible": true, "width": 120, "children": [] },
  { "key": "设备负责人", "label": "设备负责人", "visible": true, "width": 120, "children": [] },
  { "key": "所属模块", "label": "所属模块", "visible": true, "width": 120, "children": [] },
  { "key": "保养记录", "label": "保养记录", "visible": true, "width": 170, "children": [] },
  { "key": "保养注意事项", "label": "保养注意事项", "visible": true, "width": 240, "children": [] },
  { "key": "检修记录", "label": "检修记录", "visible": true, "width": 170, "children": [] },
  { "key": "检测记录", "label": "检测记录", "visible": true, "width": 240, "children": [] },
  { "key": "上机记录", "label": "上机记录", "visible": true, "width": 170, "children": [] }
]);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const total = ref(0)
const showSearch = ref(true);
const loading = ref(true);
const listData = ref([
  {
    "设备名称": "高精度电子天平",
    "编号": "EQ-2023001",
    "设备存放区域": "实验室A座302室",
    "类型": "称量设备",
    "处置状态": "在用",
    "型号": "FA2004B",
    "站点": "上海研发中心",
    "定检状态": "已校准",
    "下次定检天数": 25,
    "下次定检日期": "2025-08-03",
    "定检提醒天数": 7,
    "定检记录": "2025-02-03 校准合格，误差±0.1mg",
    "关联委托": "WT-20250615-012（材料密度检测）",
    "校准日期": "2025-02-03",
    "测试范围": "0-200g",
    "设备精度": "0.1mg",
    "供应商": "上海精密仪器有限公司",
    "生产厂商": "梅特勒-托利多",
    "价格": 8500.00,
    "设备购买日期": "2023-05-10",
    "投入使用日期": "2023-05-15",
    "设备负责人": "陈工",
    "所属模块": "材料检测部",
    "保养记录": "2025-06-15 清洁秤盘，校准砝码检查",
    "保养注意事项": "1. 避免潮湿环境；2. 每次使用后归零校准",
    "检修记录": "2024-11-05 更换传感器，维修费用500元",
    "检测记录": "2025-07-01 铝合金样品称量，数据合格",
    "上机记录": "2025-07-05 09:30-11:00 李工使用"
  },
  {
    "设备名称": "气相色谱仪",
    "编号": "GC-2023005",
    "设备存放区域": "实验室B座401室",
    "类型": "分析仪器",
    "处置状态": "在用",
    "型号": "GC-2014",
    "站点": "北京检测中心",
    "定检状态": "待校准",
    "下次定检天数": 5,
    "下次定检日期": "2025-07-14",
    "定检提醒天数": 7,
    "定检记录": "2024-12-15 校准合格，柱效测试正常",
    "关联委托": "WT-20250702-034（VOCs检测）",
    "校准日期": "2024-12-15",
    "测试范围": "沸点-20℃至350℃化合物",
    "设备精度": "峰面积重复性≤1.0%",
    "供应商": "北京北分瑞利分析仪器有限公司",
    "生产厂商": "岛津",
    "价格": 128000.00,
    "设备购买日期": "2023-08-20",
    "投入使用日期": "2023-09-01",
    "设备负责人": "王工",
    "所属模块": "环境检测部",
    "保养记录": "2025-06-28 更换进样垫，老化色谱柱",
    "保养注意事项": "1. 载气纯度≥99.999%；2. 定期老化色谱柱",
    "检修记录": "2025-03-10 维修进样口，费用800元",
    "检测记录": "2025-07-08 水质样品VOCs检测，数据上传LIMS系统",
    "上机记录": "2025-07-09 14:00-16:30 张工使用"
  },
  {
    "设备名称": "万能材料试验机",
    "编号": "UTM-2024012",
    "设备存放区域": "实验室C座205室",
    "类型": "力学性能测试设备",
    "处置状态": "维修中",
    "型号": "WDW-100E",
    "站点": "广州生产基地",
    "定检状态": "未校准",
    "下次定检天数": 0,
    "下次定检日期": "2025-01-10",
    "定检提醒天数": 7,
    "定检记录": "2024-01-10 校准合格，力值误差±0.5%",
    "关联委托": "WT-20250705-047（钢材拉伸测试）",
    "校准日期": "2024-01-10",
    "测试范围": "0-100kN",
    "设备精度": "力值示值误差±0.5%",
    "供应商": "济南试金试验机有限公司",
    "生产厂商": "济南试金",
    "价格": 56000.00,
    "设备购买日期": "2024-03-15",
    "投入使用日期": "2024-04-01",
    "设备负责人": "刘工",
    "所属模块": "力学测试部",
    "保养记录": "2025-05-20 润滑导轨，检查传感器",
    "保养注意事项": "1. 试验载荷不超过额定值的80%；2. 定期检查夹具磨损情况",
    "检修记录": "2025-07-05 伺服电机故障，待配件到货",
    "检测记录": "2025-06-25 不锈钢板拉伸测试，数据已存档",
    "上机记录": "2025-07-02 10:00-12:00 赵工使用"
  }
]);


// 获取数据
const getList = () => {
  loading.value = false
}

// 搜索
const handleQuery = () => {
}

// 重置
const resetQuery = () => {
  for (let i in queryParams.value) {
    if (i !== 'pageNum' && i !== 'pageSize') {
      queryParams.value[i] = undefined
    }
  }
  handleQuery()
}

// 多选
const handleSelectionChange = () => {
}

// 新增
const handleAdd = () => {
  formRef.value.open()
}
// 编辑
const handleEdit = (item) => {
  formRef.value.edit(item)
}



getList()
</script>
